<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>借阅管理</span>
    </div>
    <!-- 表格 -->
    <div class="table_list">
      <el-table :data="tableData" style="width: 100%" :max-height="$store.state.tableHeight" ref="table">
        <el-table-column prop="id" type="index" label="序号" width="60"></el-table-column>
        <el-table-column prop="bookname" label="书名" width="120"></el-table-column>
        <el-table-column prop="bookshelf" label="书架" width="90"></el-table-column>
        <el-table-column prop="classify" label="分类" width="90"></el-table-column>
        <el-table-column prop="lendtime" label="借阅时间" width="160">
          <template v-slot="scope">
            <span>{{ $formatDate(scope.row.lendtime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="returntime" label="还书时间" width="160">
          <template v-slot="scope">
            <span>{{ $formatDate(scope.row.returntime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="borrow_status" label="借书状态" width="90">
          <template v-slot="scope">
            <el-tag :type="scope.row.borrow_status === 1 ? 'warning' : ''">{{
              scope.row.borrow_status === 0 ? "未还" : "已还"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="overdue_status" label="到期状态" width="90">
          <template v-slot="scope">
            <el-tag :type="scope.row.overdue_status === 1 ? 'danger' : 'success'">{{ scope.row.overdue_status === 0 ?
              "未逾期" : "逾期" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="check_status" label="审核状态" width="90">
          <template v-slot="scope">
            <el-tag :type="scope.row.check_status === 0 ? 'danger' : 'success'">{{ scope.row.check_status === 0 ? "未审核" :
              "审核" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template v-slot="scope">
            <el-button type="primary" icon="el-icon-plus" size="mini"
              @click="reNewBorrowDateBtnFn(scope.row.id)">续期</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="删除" align="center" width="100">
          <template v-slot="scope">
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="delBorrowBtnFn(scope.row.id)"
            >
              <el-button
                type="danger"
                slot="reference"
                icon="el-icon-delete"
                size="medium"
              ></el-button>
            </el-popconfirm>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
    <!-- 续期 弹出层 -->
    <el-dialog title="还书时间" :visible.sync="newDateDialogVisible" :before-close="handleClose"
      @closed="onCloseFn('newDateFormRef')">
      <el-form ref="newDateFormRef" :model="newDateForm">
        <el-form-item label="还书时间" label-width="120" prop="newDate">
          <el-date-picker v-model="newDateForm.newDate" type="datetime" placeholder="选择日期时间"
            value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newDateDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="newDateSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- <Pagination /> -->
    <Pagination :total="total" @pagination="handlePageChange" />
  </el-card>
</template>

<script>
import Pagination from "@/components/Pagination.vue";
import { getBorrowListAPI, uptBorrowAPI } from "@/api";
export default {
  components: {
    Pagination,
  },
  data() {
    return {
      // 分页
      total: 0,
      pagenum: 1,
      pagesize: 9,
      // 列表
      tableData: [],
      newDateDialogVisible: false,
      newDateForm: {
        id: "",
        newDate: "",
      },
      rules: {
        username: [
          { required: true, message: "请选择读者姓名", trigger: "change" },
        ],
        phone: [
          { required: true, message: "手机号不能为空" },
          {
            pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,
            message: "手机号格式不对",
            trigger: "blur",
          },
        ],
        bookname: [
          { required: true, message: "请选择图书名称", trigger: "change" },
        ],
        classify: [
          { required: true, message: "请选择图书分类", trigger: "change" },
        ],
        bookshelf: [
          { required: true, message: "请选择图书书架", trigger: "change" },
        ],
        lendtime: [
          {
            type: "date",
            required: true,
            message: "请选择借阅日期",
            trigger: "change",
          },
        ],
        returntime: [
          {
            type: "date",
            required: true,
            message: "请选择归还日期",
            trigger: "change",
          },
        ],
        borrow_status: [
          { required: true, message: "请选择借阅状态", trigger: "change" },
        ],
        overdue_status: [
          { required: true, message: "请选择到期状态", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    // 分页
    handlePageChange(obj) {
      this.pagenum = obj.pagenum;
      this.pagesize = obj.pagesize;
      this.getList();
    },
    async getList() {
      const res = await getBorrowListAPI(this.pagenum, this.pagesize);
      // console.log(res);
      this.tableData = res.data.data;
      this.total = res.data.total;
    },
    // 同意借阅
    uptBorrowCheckBtnFn(id, key, newDate) {
      console.log(key);
      uptBorrowAPI({ id, key, newDate }).then((res) => {
        if (res.data.status === 0) {
          this.$message.success("修改成功");
          this.newDateDialogVisible = false;
          this.getList();
        }
      });
    },
    // 续约
    reNewBorrowDateBtnFn(id) {
      this.newDateForm.id = id;
      console.log(this.newDateForm);
      this.newDateDialogVisible = true;
    },
    newDateSubmit() {
      this.uptBorrowCheckBtnFn(
        this.newDateForm.id,
        "returntime",
        this.newDateForm.newDate
      );
    },
    // 对话框关闭
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
    onCloseFn(formName) {
      this.$refs[formName].resetFields();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style scoped></style>
